{% load static %}

<!DOCTYPE html>
<html>
<head>

    <meta charset="UTF-8">
    <title>Title</title>
    {% include 'admin/includes/css-part.html' %}
    <style>
        .el-aside {
            background-color: #D3DCE6;
            color: #333;
            text-align: center;
            line-height: 150px;
        }

        .logs {
            color: #F2F6FC;
            background-color: #1f2c39;
            font-size: 14px;
            font-family: 'Heiti SC';
            line-height: 20px;
            word-break: break-word;
        }

        .logs > code {
        }
    </style>
</head>
<body>
<div id="logs">
    <div>
        <el-select placeholder="请选择要查看的日志"
                   size="small"
                   v-model="log" @change="showLog">
            <el-option
                    v-for="(name,index) in names" :index="index" :label="name" :value="name">
            </el-option>
        </el-select>
        <el-link type="success" size="small"
                 icon="fas fa-download"
                 :href="'{% url 'download_log_file' %}' + '?name=' + log">下载
        </el-link>
        <el-button type="primary" @click="showLog" size="small" icon="fas fa-eye">
            查看
        </el-button>
        <el-popconfirm title="确定删除日志吗？" @confirm="removeLog">
            <el-button type="danger" size="small" icon="fas fa-trash"
                       slot="reference">删除
            </el-button>
        </el-popconfirm>
    </div>
    <el-container style="height: 780px; border: 1px solid #eee;margin-top: 5px;">
        <el-main class="logs">
            <div v-for="log in logs">
                <code v-text="log"></code>
            </div>
        </el-main>
    </el-container>
</div>


{% include 'admin/includes/js-part.html' %}
<script src="{% static 'admin/simpleui-x/js/axios.min.js' %}"></script>
<script>
    const vm = new Vue({
        el: '#logs',
        data() {
            return {
                names: [],
                log: 'logs.log',
                logs: [],
            }
        },
        beforeMount() {

        },
        mounted() {
            {#this.chart = this.$refs.charts.chart#}
            setTimeout(() => {
                this.getLogs()
                this.showLog()
            }, 50)

        },
        methods: {
            getLogs() {
                axios.get(
                    "{% url 'get_log_list' %}"
                ).then(res => {
                    console.log('获取数据列表成功', res.data)
                    {#let data = res.data#}
                    {#console.log(typeof res.data.data)#}
                    if (res.data.code === 0) {
                        this.names = res.data.data.names
                        console.log(this.logs)
                        //this.$message({
                        //    type: 'success',
                        //    message: res.data.msg
                        //});
                    } else {
                        this.loading = false
                        this.$message({
                            type: 'warning',
                            message: '获取数据列表失败！'
                        });
                    }
                }).catch(res => {
                    console.log('获取数据列表失败', res)
                    this.$message({
                        type: 'warning',
                        message: '获取数据列表失败！' + res
                    });
                })
            },
            showLog() {
                {#console.log(name)#}
                this.logs = []
                console.log(this.log)
                axios.get(
                    "{% url 'get_log_content' %}" + '?name=' + this.log
                ).then(res => {
                    console.log('获取数据列表成功', res.data)
                    {#let data = res.data#}
                    {#console.log(typeof res.data.data)#}
                    if (res.data.code === 0) {
                        this.logs = res.data.data.logs
                        console.log(this.logs)
                        //this.$message({
                        //    type: 'success',
                        //    message: res.data.msg
                        //});
                    } else {
                        this.loading = false
                        this.$message({
                            type: 'warning',
                            message: '获取数据列表失败！'
                        });
                    }
                }).catch(res => {
                    console.log('获取数据列表失败', res)
                    this.$message({
                        type: 'warning',
                        message: '获取数据列表失败！' + res
                    });
                })
            },
            downloadLog() {
                axios({
                    method: "get",
                    headers: {
                        "content-type": "application/json", // 默认值
                    },
                    url: "{% url 'download_log_file' %}" + '?name=' + this.log,
                    responseType: "blob",
                }).then(res => {
                    console.log('日志文件', res)
                    {#let data = res.data#}
                    {#console.log(typeof res.data.data)#}
                    if (res.headers['content-type'] === 'application/octet-stream;charset=utf-8') {
                        return res.data
                    } else {
                        this.loading = false
                        this.$message({
                            type: 'warning',
                            message: '删除日志文件失败！'
                        });
                    }
                }).catch(res => {
                    console.log('删除日志文件失败', res)
                    this.$message({
                        type: 'warning',
                        message: '删除日志文件失败！' + res
                    });
                })
            },
            removeLog() {
                if (this.log == 'logs.log') {
                    this.$message({
                        type: 'warning',
                        message: '当前日志正在使用中，请勿操作！'
                    });
                    return
                }
                console.log(this.log)
                axios.get(
                    "{% url 'remove_log_api' %}" + '?name=' + this.log
                ).then(res => {
                    console.log('删除日志文件成功', res.data)
                    {#let data = res.data#}
                    {#console.log(typeof res.data.data)#}
                    if (res.data.code === 0) {
                        this.getLogs()
                        this.log = 'logs.log'
                        this.showLog()
                    } else {
                        this.loading = false
                        this.$message({
                            type: 'warning',
                            message: '删除日志文件失败！'
                        });
                    }
                }).catch(res => {
                    console.log('删除日志文件失败', res)
                    this.$message({
                        type: 'warning',
                        message: '删除日志文件失败！' + res
                    });
                })
            },
        }
    })
</script>
</body>
</html>